<template>
  <div>
    <el-row class="main-top">
      <el-col>
        <h2 class="b10">学习数据</h2>
        <div class="study-statistics">
          <el-row :gutter="30" style="margin-bottom: 20px;width: 100%;">
            <el-col :span="6">
              <div class="card">
                <div class="icon i1">
                  <img src="@/assets/images/personal/u208.png" />
                </div>
                <div class="card-content">
                  <p class="content-p1">本周发帖数</p>
                  <p class="content-p2">124,345</p>
                  <p class="content-p3">
                    超过
                    <span class="content-p3-percent">10%</span>用户
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card">
                <div class="icon i2">
                  <img src="@/assets/images/personal/u221.png" />
                </div>
                <div class="card-content">
                  <p class="content-p1">总计得赞数</p>
                  <p class="content-p2">54,323</p>
                  <p class="content-p3">
                    超过
                    <span class="content-p3-percent">10%</span>用户
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card">
                <div class="icon i3">
                  <img src="@/assets/images/personal/u235.png" />
                </div>
                <div class="card-content">
                  <p class="content-p1">总计发帖浏览量</p>
                  <p class="content-p2">54,323</p>
                  <p class="content-p3">
                    超过
                    <span class="content-p3-percent">10%</span>用户
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card">
                <div class="icon i4">
                  <img src="@/assets/images/personal/u247.png" />
                </div>
                <div class="card-content">
                  <p class="content-p1">总计发帖数</p>
                  <p class="content-p2">654,345</p>
                  <p class="content-p3">
                    超过
                    <span class="content-p3-percent">10%</span>用户
                  </p>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="8">
              <el-card shadow="never" :body-style="{padding: '0px'}" style="height:350px;">
                <div slot="header" class="board-title">
                  <span>任务完成百分比</span>
                </div>
                <div class="board-body">
                  <div id="chart1"></div>
                  <!-- <div>超过40%的用户</div> -->
                  <div class="chart-desc">
                    <div>
                      <p class="desc-num">4</p>
                      <p class="desc-text">未完成任务数</p>
                    </div>
                    <div>
                      <p class="desc-num">16</p>
                      <p class="desc-text">已完成任务数</p>
                    </div>
                    <div>
                      <p class="desc-num">20</p>
                      <p class="desc-text">总任务数</p>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="never" :body-style="{padding: '0px'}" style="height:350px;">
                <div slot="header" class="board-title">
                  <span>本周帖子浏览数</span>
                </div>
                <div class="board-body">
                  <div id="chart2"></div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="never" :body-style="{padding: '0px'}" style="height:350px;">
                <div slot="header" class="board-title">
                  <span>大佬排行榜</span>
                  <el-button style="float: right;padding-right: 10px;" type="text">更多</el-button>
                </div>
                <div class="board-body">
                  <el-button-group style="margin: 15px 0 0 10px;">
                    <el-button size="mini" type="primary">发帖数</el-button>
                    <el-button size="mini">评论数</el-button>
                    <el-button size="mini">其他</el-button>
                  </el-button-group>
                  <el-table
                    :data="tableData"
                    :row-style="{height: '37px', fontSize: '12px'}"
                    :cell-style="{padding: '0'}"
                    style="margin: 0 10px;"
                  >
                    <el-table-column prop="rank" label="排名" align="center" width="60"></el-table-column>
                    <el-table-column prop="username" label="昵称" align="center" width="80"></el-table-column>
                    <el-table-column label="占比">
                      <template slot-scope="scope">
                        <el-progress :percentage="scope.row.percent" :stroke-width="4"></el-progress>
                      </template>
                    </el-table-column>
                    <el-table-column width="40" align="center">
                      <template slot-scope="scope">{{scope.row.direction}}</template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="main-bottom" :gutter="10" style="width: 100%;">
      <el-col :span="12">
        <h2 class="b10">浏览历史</h2>
        <div class="browsing-history">
          <div class="artical" v-for="(item,index) in articals" :key="index">
            <p class="artical-title">{{item.title}}</p>
            <p class="artical-outline">{{item.outline}}</p>
          </div>
          <div class="read-more">
            <el-button type="text">查看更多</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <h2 class="b10">热门动态</h2>
        <div class="hot-trend">
          <div class="artical" v-for="(item,index) in articals" :key="index">
            <p class="artical-title">{{item.title}}</p>
            <p class="artical-outline">{{item.outline}}</p>
          </div>
          <div class="read-more">
            <el-button type="text">查看更多</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
let echarts = require("echarts");
export default {
  data() {
    return {
      chart1: {},
      chart2: {},
      chartData1: 80,
      chartData2: [5, 20, 36, 10, 10, 20, 33],
      tableData: [
        {
          rank: "1",
          username: "王小虎",
          percent: 60,
          direction: "↑"
        },
        {
          rank: "2",
          username: "王小虎",
          percent: 57,
          direction: "↓"
        },
        {
          rank: "3",
          username: "王小虎",
          percent: 44,
          direction: "-"
        },
        {
          rank: "4",
          username: "王小虎",
          percent: 23,
          direction: "↑"
        },
        {
          rank: "5",
          username: "王小虎",
          percent: 12,
          direction: "-"
        }
      ],
      articals: [
        {
          title: "震惊！三岁小孩数月不进食，竟安然无恙",
          outline:
            "王根基今年三岁Lore bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. orci, sed rhoncus pronin sapien nunc accuan eget."
        },
        {
          title: "震惊！三岁小孩数月不进食，竟安然无恙",
          outline:
            "王根基今年三岁Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. orci, sed rhoncus pronin sapien nunc accuan eget."
        }
      ]
    };
  },
  methods: {
    drawLine() {
      this.chart2.setOption({
        tooltip: {},
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: 15,
            data: [5, 20, 36, 10, 10, 20, 33]
          }
        ],
        color: ["#49A9EE"]
      });
      this.chart1.setOption({
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [
          {
            name: "任务完成情况",
            type: "gauge",
            center: ["50%", "60%"], //此项可以调整仪表盘在容器中的位置
            radius: "70%", //仪表大小
            min: 0,
            max: 100,
            data: [{ value: this.chartData1, name: "完成率" }],
            axisLine: {
              show: false,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [[0.5, "#FF6F90"], [0.8, "#FFB36F"], [1, "#27D9C8"]],
                shadowColor: "#ccc",
                shadowBlur: 25,
                width: 20
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              //指针样式
              length: "60%",
              color: "#4A90E2"
            },
            title: {
              show: true,
              offsetCenter: [0, "60%"],
              color: "#333",
              fontSize: 12,
              backgroundColor: "#d8d8d8",
              borderRadius: 21,
              padding: 5
            },
            detail: {
              formatter: "{score|{value}%}",
              offsetCenter: [0, 0],
              backgroundColor: "#FFF",
              shadowColor: "#C3Cfff",
              shadowBlur: 14,
              borderRadius: 40,
              width: 38,
              rich: {
                score: {
                  color: "#333",
                  fontSize: 17,
                  padding: 14
                }
              }
            }
          }
        ]
      });
    }
  },
  mounted() {
    this.chart1 = echarts.init(document.getElementById("chart1"));
    this.chart2 = echarts.init(document.getElementById("chart2"));
    this.drawLine();
  }
};
</script>

<style lang="scss" scoped>
/* 修改 el-card 的头部样式，默认高度过高 */
.study-statistics >>> .el-card__header {
  padding: 0 0 0 10px;
  height: 40px;
  line-height: 40px;
}
.b10 {
  margin-bottom: 10px;
}
.main-top {
  height: 560px;
  margin-bottom: 30px;
  .study-statistics {
    height: 520px;
    padding: 20px 10px 10px 10px;
    box-sizing: border-box;
    background-color: #fff;
    .card {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 240px;
      height: 100px;
      margin: 0 auto;
      border: 1px solid rgb(235, 235, 235);
      color: #989898;
      .icon {
        float: left;
        width: 60px;
        height: 60px;
        line-height: 75px;
        margin-right: 25px;
        border-radius: 50%;
        text-align: center;
        vertical-align: middle;
      }
      .i1 {
        background-color: rgb(73, 169, 238);
      }
      .i2 {
        background-color: rgb(152, 216, 125);
      }
      .i3 {
        background-color: rgb(255, 216, 110);
      }
      .i4 {
        background-color: rgb(243, 133, 124);
      }
      .card-content {
        p {
          margin: 5px 0;
        }
        .content-p1 {
          font-size: 13px;
        }
        .content-p2 {
          font-size: 20px;
        }
        .content-p3 {
          font-size: 13px;
          .content-p3-percent {
            font-size: 15px;
            color: #f04133;
          }
        }
      }
    }
    .board-body {
      width: 350px;
      height: 312px;
      &::before {
        content: "";
        display: table;
      }
      #chart1 {
        width: 350px;
        height: 230px;
      }
      #chart2 {
        height: 312px;
        width: 350px;
      }
      .chart-desc {
        width: 350px;
        display: flex;
        justify-content: center;
        text-align: center;
        div {
          margin: 0 10px;
          .desc-num {
            font-size: 18px;
          }
          .desc-text {
            font-size: 12px;
          }
        }
      }
    }
  }
}
.main-bottom {
  height: 400px;
  .browsing-history {
    height: 300px;
    background-color: #fff;
    .artical {
      padding: 15px 10px;
      margin: 0 10px;
      box-sizing: border-box;
      .artical-title {
        width: 100%;
        height: 30px;
        font-size: 18px;
        font-weight: 600;
      }
      .artical-outline {
        width: 100%;
        max-height: 75px;
        margin-top: 5px;
        font-size: 14px;
      }
    }
    .read-more {
      float: right;
      margin-right: 10px;
    }
  }
  .hot-trend {
    height: 300px;
    background-color: #fff;
    .artical {
      padding: 15px 10px;
      margin: 0 10px;
      box-sizing: border-box;
      .artical-title {
        width: 100%;
        height: 30px;
        font-size: 18px;
        font-weight: 600;
      }
      .artical-outline {
        width: 100%;
        max-height: 75px;
        margin-top: 5px;
        font-size: 14px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // display: -webkit-box;
        // -webkit-line-clamp: 3;
        // -webkit-box-orient: vertical;
      }
    }
    .read-more {
      float: right;
      margin-right: 10px;
    }
  }
}
</style>